<template>
  <div class="fly-bar" :style="barStyle">
    <a-popover position="bl" trigger="hover" popup-container="body">
      <template #content v-if="!popupDisabled">
        <FlyBarTooltip style="width: 360px" :isSelector="isSelector" :data="data" @removeTempUseFn="removeTempUseFn" />
      </template>
      <div class="fly-bar-cont" :class="[tagClass]" @click.stop>
        <div class="fly-bar-cont_label">
          {{ barInfo.barName }}<span v-if="barInfo.orderStatusName">-{{ barInfo.orderStatusName }}</span>
          <span>{{ barInfo.tag }}</span>
          <span class="ml-2 lease" v-if="barInfo.orderStatusName">{{ barInfo.dateRange }}</span>
        </div>
        <div>
          <span v-if="barInfo.orderStatusName">{{ barInfo.client }}</span>
          <span v-else class="lease">{{ barInfo.dateRange }}</span>
        </div>
      </div>
    </a-popover>
  </div>
</template>

<script lang="ts">
  import { inject } from 'vue'
  import dayjs from 'dayjs'
  import FlyBarTooltip from './fly-bar-tooltip.tsx'
  import { calcBarPosition } from './../tableUtil.js'
  import { removeTempUse } from '@/api/asset/carStock'
  import { Modal } from '@arco-design/web-vue'

  // 获取bar类型
  const getBarType = (data: any) => {
    if (data.typeSet.length == 1) {
      return data.typeSet[0]
    }
    // 车辆冲突
    if (data.typeSet.includes(5)) {
      return 5
    }
    // 逾期
    if (data.typeSet.includes(4)) {
      return 4
    }
    return data.type
  }

  export default {
    name: 'FlyBar',
    components: {
      FlyBarTooltip,
    },
    props: {
      data: {
        type: Object,
        default: () => {},
      },
      carIndex: {
        type: Number,
        required: true,
      },
    },
    setup(props) {
      // 加载数据
      const loadDataFn = inject('loadDataFn') as Function
      // 数据
      const stockState = inject('stockState')
      const isSelector = stockState.selector
      const beginTime = stockState.queryParam.startTime
      const endTime = stockState.queryParam.endTime
      const barPosition = calcBarPosition(beginTime, endTime, props.data.fromTime, props.data.toTime, stockState.hourPx)

      const refId = 'stock-flybar-' + props.data.id
      // bar类型
      // 0:无占用车辆 3:维修、保养、年检,4:逾期未还,5:车辆冲突,6:丢失,7:临时占用,8:已借出,9:借出未还,10:订单占用,
      // 10:订单占用,【后面归为10】-2:悟空,-3:哈啰,-4:携程,-5:飞猪,-6:滴滴,-7:铁行,-8:飞租,1:线下订单占用,2:渠道订单占用,
      // 2025-06-07：移除10、1、2；增加100、200（待用车、用车用）
      const barType = getBarType(props.data)
      const barInfo = {
        client: props.data.clientName + '-' + props.data.memberPhone,
        dateRange: dayjs(props.data.fromTime).format('MM/DD HH:mm') + ' - ' + dayjs(props.data.toTime).format('MM/DD HH:mm'),
        barName: props.data.channelTypeName ? `${props.data.channelTypeName}` : props.data.useTypeName,
        orderStatusName: props.data.orderStatusName,
        tag: '',
      }
      // 临时占用=订单>已借出=借出未还>运维单
      // 默认（运维单）
      let zIndex = 10
      // 借出
      if (barType == 8) {
        zIndex = 11
        barInfo.barName = props.data.createUser + '借出'
        //  借出未还
      } else if (barType == 9) {
        zIndex = 11
        barInfo.barName = props.data.createUser + '借出(逾)'
      }
      // 订单占用
      else if (barType == 1 || barType == 2 || barType == 100 || barType == 200) {
        zIndex = 12
      }
      // 临时占用
      else if (barType == 7) {
        zIndex = 12
        barInfo.barName = props.data.createUser + '占用'
      } else if (barType == 4) {
        barInfo.tag = '(逾)'
      }
      // 冲突
      else if (barType == 5) {
        zIndex = 15
        if (props.data.typeSet.includes(7)) {
          barInfo.barName = props.data.createUser + '占用'
        }
        barInfo.tag = '(冲)'
      }
      // 丢失
      else if (barType == 6) {
        zIndex = 665
      }

      // 解除占用
      const removeTempUseFn = (id: string) => {
        Modal.confirm({
          title: '提示',
          simple: true,
          cancelText: '取消',
          okText: '确认',
          width: '480px',
          content: '是否确认释放库存？',
          onOk: () => {
            removeTempUse({ id }).then(() => {
              loadDataFn()
            })
          },
        })
      }

      const safe_with = barPosition.width < 30 ? 30 : barPosition.width
      return {
        isSelector,
        refId,
        barInfo,
        // 禁止弹出
        popupDisabled: props.data.label == 6,
        // 状态class
        tagClass: 'tag_' + barType,
        barStyle: {
          width: safe_with + 'px',
          left: barPosition.left + 'px',
          top: props.carIndex * 40 + 1 + 'px',
          zIndex,
        },
        removeTempUseFn,
      }
    },
  }
</script>

<style lang="less" scoped>
  @import '../../../../tag.less';
  .fly-bar {
    position: absolute;
    top: 0;
    left: 10px;
    z-index: 88;
    height: 39px;
    cursor: pointer;
    &:hover {
      z-index: 666 !important;
    }

    &-cont {
      position: relative;
      height: 100%;
      padding: 6px 0 6px 6px;
      font-size: 12px;
      line-height: 12px;
      color: #fff;
      overflow: hidden;
      white-space: nowrap;

      &_label {
        margin-bottom: 4px;
        color: #fff;
      }
      .lease {
        color: #fff;
      }
    }
  }

  :deep(.arco-descriptions-item-label) {
    width: 0% !important;
    padding-left: 10px !important;
    padding: 3 10px !important;
    &::after {
      content: none !important;
    }
  }
  :deep(.arco-descriptions-item-value-block) {
    padding: 3px 10px !important;
  }

  .text-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
